<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix='sec' uri='http://www.springframework.org/security/tags'%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<script type="text/javascript" src="scripts/boot.js"></script>
	<style type="text/css">
		.mini-checkboxlist-item{
			padding: 5px;
		}
	</style>
</head>
<body style="border: 0px; margin: 0px; padding: 0px;width: 100%;height: 100%">
	<div class="mini-fit" >
		<div id="queue_grid" class="mini-datagrid" showPager="false" style="width:100%;height:100%;" allowResize="true"
	        url=""  idField="id" onshowrowdetail="onShowRowDetail" >
	        <div property="columns">   
	        	<div type="indexcolumn">序号</div>         
	            <div type="expandcolumn" >#</div>
	            <div field="queueName" width="320" headerAlign="left" >队列号</div>  
	            <div name="action" width="19%" headerAlign="center" align="center" renderer="onActionRenderer" >相关操作</div>        
	        </div>
	    </div> 
	    
	    <div id="detailGrid_Form" style="display:none;">
	        <div id="extension_grid" class="mini-datagrid" showPager="false" style="width:100%;height:auto;" url="" >
	            <div property="columns">
	            	<div type="indexcolumn">序号</div>
	                <div field="eNum" width="120" headerAlign="center" allowSort="true">分机号</div>
	                <div name="action" width="19%" headerAlign="center" align="center" renderer="removeAction" >相关操作</div>
	            </div>
	        </div>    
	    </div>
	    
	    <div id="memberWindow" class="mini-window" title="分机号" style="width:500px;height:300px;" showModal="true" allowResize="true" allowDrag="true">
			<div id="member" style="height: 200px;" class="mini-checkboxlist" repeatItems="10" repeatLayout="table" textField="extension" valueField="extension" value="" url="" ></div>
			
			<div style="text-align:center;padding-top:20px;">               
	            <a class="mini-button" onclick="addQueueMember" style="width:60px;margin-right:20px;">确定</a>       
	            <a class="mini-button" onclick="onCancel" style="width:60px;">取消</a>       
        	</div> 
		</div>
	</div>
<script type="text/javascript">
	mini.parse();
	
	var queueGrid = mini.get("queue_grid");
	var extensionGrid = mini.get("extension_grid");
	
	var detailGrid_Form = document.getElementById("detailGrid_Form");
	
/*连接WebSocket*/
    jQuery.openWebSocket("ws://172.16.2.11:8080/websocket");
    
    
// 连接成功时执行
    function webSocketOnOpen(event) {
		jQuery.showQueueNum();
 	}
    
// 接收返回数据
    function webSocketOnMessage(event) {
		var data = $.evalJSON(event.data);
		
		switch (data.Event) {
		case "QueueNum":
			var datas = [];
			for(var i=0; i<data.Queues.length; i++) {
				var qObj = {};
				qObj.queueName = data.Queues[i];
				datas.push(qObj);
			}
			queueGrid.setData(datas);
			break;
		case "QueueStatus":
			var extensionDatas = [];
			for(var i=0; i<data.Queues.length; i++) {
				if(typeof(data.Queues[i].Member) != "undefined") {
					for(var j=0; j<data.Queues[i].Member.length; j++){
						var extensionData = {};
						var name = data.Queues[i].Member[j].name;
						var eName = name.substr(name.lastIndexOf("/") + 1);
						extensionData.eNum = eName;
						extensionDatas.push(extensionData);
					}
				}
			}
			extensionGrid.setData(extensionDatas);
			break;
		}
	}
	
	// 展开详细
	function onShowRowDetail(e) {
         var grid = e.sender;
         var row = e.record;
         var td = grid.getRowDetailCellEl(row);
         td.appendChild(detailGrid_Form);
         detailGrid_Form.style.display = "block";
         jQuery.queueStatus(row.queueName);
    }
	
	// 队列相关操作
	function onActionRenderer(e) {
		return '<a href="javascript: openMember()">添加队列成员</a>';
	}
	
	var member = mini.get("member");
	var memberWindow = mini.get("memberWindow");
	function openMember() {
		var row = queueGrid.getSelected();
		if(row) {
			member.setUrl("alternately_no_extension.do?queue=" + row.queueName);
			memberWindow.show();
		} else {
			mini.alert("请选择数据！");
		}
	}
	
	// 添加队列成员
	function addQueueMember() {
		var row = queueGrid.getSelected();
		if(member.getValue().length > 0) {
			var members = new Array();
			members = member.getValue().split(",");
			$.post("alternately_add_extension.do", {extension: member.getValue(), queue: row.queueName}, function(data) {
				for(var i=0; i<members.length; i++) {
					if(data.success) {
						jQuery.queueAdd(row.queueName, members[i]);
						memberWindow.hide();
						var row0 = {};
						row0.eNum = members[i];
						extensionGrid.addRow(row0, 0);
					} else {
						mini.alert("添加失败，未选择分机号或队列号！");
					}
				}
			}, "json");
		} else {
			mini.alert("未选择任何号码！");
		}
	}
	
	// 关闭
	function onCancel(e) {
		memberWindow.hide();
    }

	// 分机相关操作
	function removeAction(e) {
		return '<a href="javascript: removeMember()">踢出队列</a>';
	}
	
	function removeMember() {
		var row1 = queueGrid.getSelected();		// 队列行
		var row2= extensionGrid.getSelected();	// 分机行
		$.post("alternately_remove_extension.do", {extension: row2.eNum, queue: row1.queueName}, function(data) {
			if(data.success) {
				jQuery.queueRemove(row1.queueName, row2.eNum);
				extensionGrid.removeRow(row2, false);
			}
		}, "json");
	}
	
</script>
</body>
</html>